<template>
    <!-- <van-nav-bar left-arrow fixed @click-left="onBack">
        <template #title>
            <van-field placeholder="请输入商品" />
        </template>

        <template #right>
            <van-icon name="ellipsis" />
        </template>
    </van-nav-bar> -->
    <div class="headerbox">
        <div class="header">
            <div class="headerL">
                <a @click="router.back()" class="goback"><img src="/assets/images/goback.png" /></a>
            </div>
            <div class="headerC0">
                <div class="ssdiv">
                    <img src="/assets/images/ss.png" @click="search" /><input @keydown.enter="search"
                        v-model="state.keywords" name="" type="text" placeholder="输入关键字..." />
                </div>
            </div>
            <div class="headerR" @click="show = true">
                <img src="/assets/images/tr.png" />
            </div>
        </div>
    </div>
    <div class="shopType">
        <van-dropdown-menu>
            <van-dropdown-item @click="getProductData" v-model="state.flag" :options="state.flagOption" />
            <van-dropdown-item @click="getProductData" v-model="state.order" :options="state.orderOption" />
        </van-dropdown-menu>
    </div>
    <div class="clear"></div>
    <div class="hbox"></div>
    <div class="mainWarp" style="background:#f3f3f3;">
        <ul class="proul" v-if="state.ProductList.length > 0">
            <li v-for="item in state.ProductList" :key="item.id">
                <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
                    <img :src="item.avatars_cdn[0]" style="height: 100px;" />
                </router-link>
                <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
                    <p class="tit">{{ item.name }}</p>
                </router-link>
                <div class="price">
                    <p>￥ {{ item.price }}</p>
                </div>
            </li>
        </ul>
        <van-empty v-else description="暂无商品" />
    </div>

    <van-popup v-model:show="show" round position="bottom">
        <van-picker :columns="state.TypeList" @cancel="show = false" @confirm="onConfirm" />
    </van-popup>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive, onMounted } from 'vue'
import apiList from '@/api'
import { useHomeStore } from '@/store/home.js'
import { storeToRefs } from 'pinia'

const router = useRouter()
const route = useRoute()
let show = ref(false)
const homeStore = useHomeStore()
const { homeInfo } = storeToRefs(homeStore)
const state = reactive({
    typeid: route.query.typeid,
    flag: 0,//分类
    order: 'createtime',// 排序
    ProductList: [],
    TypeList: [],
    keywords: '',//搜索的关键字
    flagOption: [
        { text: '全部', value: 0 },
        { text: '新品', value: 1 },
        { text: '热销', value: 2 },
        { text: '推荐', value: 3 },
    ],
    orderOption: [
        { text: '默认排序', value: 'createtime' },
        { text: '价格降序', value: 'price DESC' },
        { text: '价格升序', value: 'price ASC' },
        { text: '库存降序', value: 'stock DESC' },
        { text: '库存升序', value: 'stock ASC' },
    ],
})

onMounted(() => {
    getProductData()
    state.TypeList = homeInfo.value.typeData.map(({ id, name }) => {
        return { text: name, value: id }
    })
})

async function getProductData() {
    let data = {
        typeid: state.typeid,
        order: state.order,
        flag: state.flag
    }

    let result = await apiList.ProductIndex(data)
    if (result.code === 1) {
        state.ProductList = result.data
    }
}

function onConfirm(values) {
    show.value = false
    state.typeid = values.selectedOptions[0].value
    getProductData()
}

//搜索
async function search() {
    if (state.keywords) {
        let res = await apiList.ProductSearch({ keywords: state.keywords.trim() })
        state.keywords = ''
        if (res.code == 1) {
            state.ProductList = res.data
        } else {
            state.ProductList = []
        }
    }
}
</script>